html,
body {
  width: 100%;
  height: 100%;
}
* {
  padding: 0;
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100%;
}

.flex {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
//流程页面-新版
.home-flowPath-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .nav-bar-container {
    flex-shrink: 0;
    .van-nav-bar {
      z-index: 0;
      .van-nav-bar-title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &.van-hairline--bottom {
        &::after {
          display: none !important;
        }
      }
      .van-nav-bar__content {
        .van-nav-bar__arrow {
          font-size: 40px;
          color: #fff;
        }
        .van-nav-bar__title {
          color: #fff;
          font-weight: 400;
          max-width: 80%;
        }

        .van-nav-bar__left,
        .van-nav-bar__right {
          padding: 0 14px;
        }
      }
    }
  }
}
.process-body-container {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #385af9;
  position: relative;
  .banner {
    width: 100%;
    height: 3.3067rem;
    background: url("../images/h5-bg.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .main {
    flex: 1;
    overflow: hidden;
    .card-container {
      margin: 0 0.4rem 0.2667rem 0.4rem;
      background: #ffffff;
      border-radius: 0.1333rem;
      display: flex;
      flex-direction: column;
      .header {
        flex-shrink: 0;
        text-align: center;
        font-size: 0.48rem;
        font-weight: bold;
        color: #1e7cff;
        position: relative;
        box-sizing: border-box;
        padding: 0.4rem 0;
        .title-bg {
          width: 5.8267rem;
          height: 0.3467rem;
          background: url("../images/h5-title.png") no-repeat center center;
          background-size: 100% 100%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .line {
        margin: 0 auto;
        width: 8.3467rem;
        border: 0.0133rem dashed #dcdcdc;
        position: relative;
        margin-bottom: 0.4rem;
        &::after {
          content: "";
          position: absolute;
          top: -0.2667rem;
          left: -0.8rem;
          height: 0.5333rem;
          width: 0.5333rem;
          border-radius: 50%;
          background-color: #385af9;
        }
        &::before {
          content: "";
          position: absolute;
          top: -0.2667rem;
          right: -0.8rem;
          height: 0.5333rem;
          width: 0.5333rem;
          border-radius: 50%;
          background-color: #385af9;
        }
      }
      .base-info {
        flex: 1;
        box-sizing: border-box;
        padding: 0 0.4rem 0.4rem 0.4rem;

        .item {
          display: flex;
          font-size: 0.4rem;
          font-weight: 500;
          margin-bottom: 0.4rem;
          line-height: 100%;
          .name {
            flex-shrink: 0;
            color: #8e8e8e;
            min-width: 1.7333rem;
            text-align-last: justify;
          }
          .sem {
            color: #8e8e8e;
          }
          .text {
            flex: 1;
            box-sizing: border-box;
            word-break: break-all;
            color: #333333;
            &.m-r-100 {
                margin-right: 1.7333rem;
            }
          }

          &:last-of-type {
            margin-bottom: 0;
          }
        }
        .sub-card {
          background: #edf5ff;
          border-radius: 0.1333rem;
          box-sizing: border-box;
          padding: 0.4rem .2667rem;
          margin-bottom: 0.1333rem;
          position: relative;
          &:last-of-type {
            margin-bottom: 0;
          }
        }
        .m-b-0 {
          margin-bottom: 0 !important;
        }
        .detail-button {
          position: absolute;
          right: 0.4rem;
          bottom: 0.4rem;
          font-size: 0.4rem;
          font-weight: 500;
          color: #1e7cff;
        }
      }
    }
    .company {
      text-align: center;
      font-size: 0.4rem;
      font-weight: 500;
      color: #e8ecff;
      margin-bottom: 0.4rem;
    }
  }
}

//流程页面-老版
.dashboard-screen-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f3f4f8;
  .nav-bar-container {
    flex-shrink: 0;
    .van-nav-bar {
      z-index: 0;
      .van-nav-bar-title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &.van-hairline--bottom {
        &::after {
          display: none !important;
        }
      }
      .van-nav-bar__content {
        .van-nav-bar__arrow {
          font-size: 40px;
          color: #fff;
        }
        .van-nav-bar__title {
          color: #fff;
          font-weight: 400;
          max-width: 80%;
        }

        .van-nav-bar__left,
        .van-nav-bar__right {
          padding: 0 14px;
        }
      }
    }
  }
}
.process-monitoring-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  padding-top: 3.4533rem;
  overflow: hidden;
  .banner {
    width: 100%;
    height: 4.7467rem;
    background: url("../images/banner.png") no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .main {
    z-index: 10;
    flex: 1;
    overflow: hidden;
    border-radius: 40px 40px 0px 0px;
    background: #f3f4f8;
    .process-item:first-child {
      margin-top: 0.7467rem;
    }
    .process-item:last-child {
      .left {
        .line {
          display: none;
        }
      }
    }
    .process-item {
      margin: 0px 0.4rem 0px 0.4rem;
      display: flex;
      .left {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        .dot {
          position: absolute;
          top: 0.6133rem;
          width: 0.1867rem;
          height: 0.1867rem;
          background: #ffffff;
          border: 0.04rem solid #5bd0a6;
          border-radius: 50%;
        }
        .line {
          position: absolute;
          top: 0.8533rem;
          width: 0.0267rem;
          height: 100%;
          border-left: 0.0533rem solid #b9bcc5;
        }
      }
      .right {
        flex: 1;
        margin: 0 0px 0.2667rem 0.4rem;
        box-sizing: border-box;
        padding: 0.4rem;
        background: #ffffff;
        box-shadow: 0px 0px 0.2133rem 0px rgba(201, 206, 218, 0.2);
        border-radius: 0.1333rem;
        position: relative;
        .state {
          position: absolute;
          right: 0.32rem;
          top: 0.32rem;
          width: 1.5467rem;
          height: 1.2267rem;
          img {
            width: 1.5467rem;
            height: 1.2267rem;
          }
        }

        .title {
          font-size: 0.48rem;
          color: #333333;
          margin: 0 0 0.4rem 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          font-weight: bold;
        }
        .content {
          display: flex;
          align-items: center;
          .user-time {
            flex: 1;
            .row {
              display: flex;
              line-height: 100%;
              font-size: 0.4rem;
              color: #8e8e8e;
              margin-bottom: 0.2667rem;
              .lable {
                flex-shrink: 0;
              }
              .value {
                flex: 1;
                word-break: break-all;
              }
            }
          }
        }
      }
    }
  }
}

//详细页面
.detail-container {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  padding-top: 0.2667rem;
  overflow: hidden;
  background: #f3f4f8;

  .custom-title {
    font-size: 0.4rem;
    color: #8e8e8e;
  }
  .custom-value {
    font-size: 0.4rem;
    color: #333333;
    word-break: break-all;
  }
  .custom-extra {
    margin-left: 0.1333rem;
  }
  .gj-container {
    margin-top: 0.2667rem;
  }
  .details-button {
    margin: 0.4rem 0.4rem;
    height: 0.9333rem;
    background: #1e7cff;
    border-radius: 0.4667rem;
    font-size: 0.4rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    .text {
      line-height: 100%;
      margin-left: 0.2667rem;
    }
  }

  .swiper-container {
    flex: 1;
    overflow: hidden;

    .subtitle {
      font-size: 0.4rem;
      color: #1e7cff;
      padding: 0.4rem;
    }

    //附件
    .file-list {
      display: flex;
      align-items: center;
      margin-bottom: 0.4rem;
      &:last-of-type {
        margin-bottom: 0;
      }
      > img {
        width: 0.48rem;
        height: 0.56rem;
        margin-right: 0.2667rem;
      }
      > span {
        font-size: 0.4rem;
        text-decoration: underline;
        color: #5599fe;
        word-break: break-all;
      }
    }
    //图片
    .images {
      display: flex;
      flex-wrap: wrap;
      .img {
        width: 1.8667rem;
        height: 1.6rem;
        border-radius: 0.1333rem;
        overflow: hidden;
        background: rgba(234, 234, 234, 0.8);
        margin: 0 0.1333rem 0.1333rem 0;
      }
    }
    .van-swipe {
      height: 100%;
      overflow: hidden;
      .van-swipe__indicators {
        display: none;
      }
    }
  }

  .page-container {
    position: absolute;
    bottom: 1.7867rem;
    left: 50%;
    transform: translate(-50%);
    height: 1.0667rem;
    width: 3.3067rem;
    background: #ffffff;
    box-shadow: 0px 0.1067rem 0.32rem 0px rgba(153, 153, 153, 0.2);
    border-radius: 0.5333rem;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    .number {
      font-size: 0.4rem;
      color: #666666;
      padding: 0 0.1333rem;
      margin: 0 0.32rem;
    }
  }
}

//数据明细
.open-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .card-list {
    margin: 0 0.4rem 0.2667rem 0.4rem;
    background: #ffffff;
    box-shadow: 0px 0px 0.2133rem 0px rgba(201, 206, 218, 0.2);
    border-radius: 0.1333rem;
    position: relative;
    box-sizing: border-box;
    padding: 0.4rem;
    .title {
      font-size: 0.48rem;
      color: #333333;
      margin: 0 0 0.4rem 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
    .row {
      display: flex;
      font-size: 0.4rem;
      color: #8e8e8e;
      margin-bottom: 0.2667rem;
      line-height: 100%;
      .lable {
        flex-shrink: 0;
      }
      .value {
        flex: 1;
        word-break: break-all;
      }
    }
    .line-row {
      display: flex;
      font-size: 0.4rem;
      color: #8e8e8e;
      margin-bottom: 0.2667rem;
      .item {
        line-height: 100%;
        display: flex;
        flex: 1;
        .lable {
          flex-shrink: 0;
        }
        .value {
          flex: 1;
          overflow: hidden;
          flex-wrap: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .van-collapse {
      .van-collapse-item__title {
        padding: 0.2667rem 0;
        position: relative;
        .van-cell__title {
          font-size: 0.4rem;
          color: #1e7cff;
        }
        .open {
          border: 1px solid #1e7cff;
          background: #1e7cff;
        }
        .close {
          background: #ffffff;
          border: 1px solid #dbdbdb;
        }
        .arrow-icon {
          position: absolute;
          right: 0;
          top: 0.2667rem;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 0.5333rem;
          height: 0.5333rem;
          border-radius: 0.1333rem;
        }
      }
      .van-collapse-item__content {
        padding: 0.2667rem 0;
      }
    }
    .table {
      margin-top: 0.2667rem;
      border: 0.0133rem solid #eaeaea;
      background-color: #fff;
      border-top: none;
      .thead {
        height: 0.9333rem;
        font-size: 0.3733rem;
        align-items: center;
        color: #666666;
        background: #e6f1ff;
        .th {
          flex: 1;
          text-align: center;
          flex-shrink: 0;
        }
      }
      .tbody {
        font-size: 0.4rem;
        color: #333;
        .tr {
          height: 1.0667rem;
          align-items: center;
          border-bottom: 0.0133rem solid #eaeaea;
          &:last-child {
            border: none;
          }
          .td {
            flex: 1;
            text-align: center;
            flex-shrink: 0;
          }
        }
      }
    }

    &:first-child {
      margin-top: 0.2667rem;
    }
  }
}

//下拉刷新
.pull-refresh-container {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .van-pull-refresh {
    height: 100%;
    overflow: auto;
    flex: 1;
    .van-list {
      height: 100%;
    }
    .van-pull-refresh__track {
      height: auto;
    }
    .reach-bottom-container {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #969799;
      font-size: 0.3733rem;
      padding: 0.1333rem 0 0.2667rem 0;
    }
  }
}

//身份验证失败
.fail {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f3f4f8;
  img {
    height: 4rem;
  }
  .tip {
    margin-top: 0.2667rem;
    font-size: 0.4rem;
  }
}

.h5-operation {
  display: flex;
  align-items: center;
  font-size: 0.4rem;
  color: #666666;
  background-color: #ffffff;
  box-shadow: 0px -0.1067rem 0.2133rem 0px rgba(170, 170, 170, 0.2);
  border-top: 0.0133rem solid #eeeeee;
  .h5-button {
    margin: 0.4rem 0.4rem;
    width: 100%;
    height: 1.2rem;
    background: linear-gradient(90deg, #2d82f9, #385af9);
    box-shadow: 0px 0.1067rem 0.32rem 0px rgba(56, 90, 249, 0.25);
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.48rem;
    color: #f3f4f8;
  }
}

//表单布局
.submit-form-container {
  .van-form {
    overflow: auto;
    .van-field__label {
      font-size: 0.4rem;
      color: #333333;
      min-width: 2.9333rem !important;
    }
  }
  .van-cell__title {
    color: #333;
    -webkit-text-fill-color: #333;
  }
  .van-field__control:disabled {
    color: #333;
    -webkit-text-fill-color: #333;
  }

  .select-picker-container {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding-right: 0.4rem;
    position: relative;
    .van-cell {
      padding-right: 0.08rem;
      &::after {
        right: 0 !important;
      }
    }
    .icon {
      height: 100%;
      transition: 0.2s;
      position: relative;

      &.show {
        transform: rotate(90deg);
      }
      .van-icon {
        flex-shrink: 0;
        display: flex;
      }
    }
    &::after {
      position: absolute;
      box-sizing: border-box;
      pointer-events: none;
      content: " ";
      min-width: 0.64rem;
      bottom: 0;
      right: 0.4rem;
      border-bottom: 0.0133rem solid #ebedf0;
      opacity: 0.5;
    }
    &:nth-last-child(2) {
      &::after {
        display: none;
      }
    }
  }

  .textarea-container {
    flex-direction: column;
  }

  .imgs-container {
    background-color: #ffffff;
    padding: 0 0.4rem;
    .img-title {
      font-size: 0.4rem;
      color: #333333;
      padding: 0.4rem 0;
    }
  }

  .submit-button {
    height: 1.2rem;
    width: 9.2rem;
    margin: 0.6667rem 0.4rem;
    background: linear-gradient(90deg, #2d82f9, #385af9);
    box-shadow: 0px 0.1067rem 0.32rem 0px rgba(56, 90, 249, 0.25);
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.48rem;
    color: #f3f4f8;
    border: 0;
  }
}
